<template>
  <!-- 第一个图 -->
  <div>
    <div class="status" v-show="showid==1">
      <div class="status-top">
        <span>近五年空气质量等级变化趋势</span>
      </div>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div class="status-buttom">
        <div class="firstchartsdiv">
          <img src="../assets/leftline.png" alt />
          <span>{{texttab.tab1text}}</span>
          <img src="../assets/rightline.png" alt />
        </div>
        <div id="myCharts"></div>
        <div class="threechartsdiv">
          <img src="../assets/leftline.png" alt />
          <span>{{texttab.tab2text}}</span>
          <img src="../assets/rightline.png" alt />
        </div>
        <div id="buCharts"></div>
      </div>
    </div>
    <!-- 第二个图 -->
    <div class="status" v-show="showid==2" style="padding-bottom:20px;border-radius:6px">
      <div class="status-top">
        <span>达标推算</span>
        <span></span>
      </div>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div class="status-buttom">
        <div class="firstchartsdiv">
          <img src="../assets/leftline.png" alt />
          <span>剩余天数每日控制</span>
          <img src="../assets/rightline.png" alt />
        </div>
        <div class="bottombox">
          <div class="flexbox">
            <div class="transverse">
              <!-- <p class="ptext">PM2.5</p> -->
              <p class="prext">PM2.5</p>
              <div class="transversediv">
                <p>
                  当前累计:
                  <span style="color:#228be3">49</span>
                </p>
                <p>
                  当前累计:
                  <span style="color:#228be3">35</span>
                </p>
              </div>
            </div>
            <div class="transverse" style="background-color:#7fc8d8">
              <p class="prext">PM2.5</p>
              <div class="transversediv">
                <p>
                  当前累计:
                  <span style="color:#228be3">49</span>
                </p>
                <p>
                  当前累计:
                  <span style="color:#228be3">35</span>
                </p>
              </div>
            </div>
          </div>
          <div class="flexbox">
            <div class="transverse">
              <!-- <p class="ptext">PM2.5</p> -->
              <p class="prext">PM2.5</p>
              <div class="transversediv">
                <p>
                  当前累计:
                  <span style="color:#228be3">49</span>
                </p>
                <p>
                  当前累计:
                  <span style="color:#228be3">35</span>
                </p>
              </div>
            </div>
            <div class="transverse" style="background-color:#7fc8d8">
              <p class="prext">PM2.5</p>
              <div class="transversediv">
                <p>
                  当前累计:
                  <span style="color:#228be3">49</span>
                </p>
                <p>
                  当前累计:
                  <span style="color:#228be3">35</span>
                </p>
              </div>
            </div>
          </div>
          <div class="flexbox">
            <div class="transverse">
              <!-- <p class="ptext">PM2.5</p> -->
              <p class="prext">PM2.5</p>
              <div class="transversediv">
                <p>
                  当前累计:
                  <span style="color:#228be3">49</span>
                </p>
                <p>
                  当前累计:
                  <span style="color:#228be3">35</span>
                </p>
              </div>
            </div>
            <div class="transverse" style="background-color:#7fc8d8">
              <p class="prext">PM2.5</p>
              <div class="transversediv">
                <p>
                  当前累计:
                  <span style="color:#228be3">49</span>
                </p>
                <p>
                  当前累计:
                  <span style="color:#228be3">35</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="status" v-show="showid==2" style="padding-bottom:20px;border-radius:5px;top: 6.2rem">
      <div class="pmData">
        <span class="status-top" style="padding-left: 0.125rem;">城市达标统计</span>
        <div class="left_topcontent">
          <el-table :data="cityData" style="width: 100%" class="tableBox">
            <el-table-column label="PM2.5达标">
              <el-table-column type="index" label="排名"></el-table-column>
              <el-table-column prop="city" label="城市"></el-table-column>
            </el-table-column>
            <el-table-column label="O3超标">
              <el-table-column type="index" label="排名"></el-table-column>
              <el-table-column prop="city" label="城市"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 第三个图 -->
    <div class="status" v-show="showid==3">
      <div class="box-card">
        <div class="status-top">
          <span>任务调度</span>
        </div>
             <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
        <div class="num_count">
          <div class="count-left">
            <span class="over">已完成</span>
            <span class="over">166</span>
            <span class="over">80%</span>
          </div>
          <div class="line"></div>
          <div class="count-right">
            <span class="noover">未完成</span>
            <span class="noover">3</span>
            <span class="noover">20%</span>
          </div>
        </div>
        <div class="table">
          <el-table :data="tableData" border style="font-size: 8px;" width="100%">
            <el-table-column prop="id" label="序号" width="40" align="center"></el-table-column>
            <el-table-column prop="time" label="调度时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="task" label="任务描述" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="状态" width="60"></el-table-column>
            <!-- <el-table-column prop="operation" label="操作" width="50" align="center">
              <el-button
                style="border: none"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >
                <i class="el-icon-view"></i>
              </el-button>
            </el-table-column>-->
          </el-table>
        </div>
      </div>
    </div>
    <!-- 第四个图 -->
    <div class="status" v-show="showid==4">
      <div class="status-top">
        <span style="margin-right:10px" @click="fourtab1">涉气污染源</span>
      </div>
           <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div class="status-buttom4" v-show="fourcharts==1">
        <div id="myCharts4" :style="{width: '140px',height: '120px'}"></div>
        <div id="drawright4" :style="{width: '140px',height: '120px'}"></div>
      </div>
      <div id="buCharts4"></div>
    </div>
    <div class="status" v-show="showid==4" style="top: 7.5rem">
      <div class="status-top">
        <span style="margin-right:10px">移动源</span>
      </div>
      <div class="staus-buttom5">
        <div id="myCharts5" :style="{width: '140px',height: '170px'}"></div>
        <div id="drawright5" :style="{width: '140px',height: '170px'}"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      showid: 1,
      fourcharts: 1,
      texttab: {
        tab1text: "空气质量等级对比",
        tab2text: "优良天数同比分析"
      },
      value: "沈阳市",
      options: [
        { lable: "沈阳市", value: "沈阳市" },
        { lable: "铁岭市", value: "铁岭市" }
      ],
      tableData: [
        {
          id: "1",
          time: "2020-01-01",
          task:
            "北市场街道路边施工，渣土车带泥上路，路面扬尘污染严重。立即停止渣土车行驶",
          status: "已完成"
        },
        {
          id: "2",
          time: "2020-01-02",
          task:
            "新华街道38号张亮麻辣烫油烟浓度高。检查油烟净化器，设备正常运转，油烟净化器定期清洁",
          status: "未完成"
        },
        {
          id: "3",
          time: "2020-01-03",
          task: "南市场街道旁露天焚烧秸秆",
          status: "已完成"
        },
        {
          id: "4",
          time: "2020-01-04",
          task: "三台子街道顺达汽修厂油漆味重，已停止喷漆，集中处理危废",
          status: "未完成"
        },
        {
          id: "5",
          time: "2020-01-05",
          task: "大塘村与皇姑区交界处农田焚烧，停止焚烧",
          status: "未完成"
        },
        {
          id: "6",
          time: "2020-01-06",
          task: "舍利塔街道8号路边抑尘网苫盖不达标，多数土方裸露",
          status: "未完成"
        },
        {
          id: "7",
          time: "2020-01-07",
          task:
            "陵东街道粉煤灰仓库未装门挡，大量灰尘飘出，料仓外临时堆放的石料未苫盖。",
          status: "未完成"
        },
        {
          id: "8",
          time: "2020-01-08",
          task:
            "沈阳市旭升电子有限公司  1.注塑成型工序机废料破碎工序集气罩过小，气味浓  2.烟气处理器运行台账不全",
          status: "未完成"
        },
        {
          id: "9",
          time: "2020-01-09",
          task:
            "兴工街道众腾汽车服务有限公司喷漆房无废气处理装置，无危废储存间，废机油随意存放",
          status: "未完成"
        },
        {
          id: "10",
          time: "2020-01-10",
          task: "铁西区西三环街道许氏家常菜油烟净化器己安装运行正常",
          status: "未完成"
        }
      ],
      cityData: [
        {
          city: "沈阳市"
        },
        {
          city: "大连市"
        },
        {
          city: "铁岭市"
        },
        {
          city: "盘锦市"
        },
        {
          city: "丹东市"
        },
        {
          city: "营口市"
        },
        {
          city: "辽阳市"
        }
      ]
    };
  },
  mounted() {
    this.drawLine();
    this.drawCharts();
    this.drawLine4();
    this.drawright4();
    this.buRight4();
    this.drawLine5();
    this.drawright5();
  },
  methods: {
    fourtab1() {
      this.fourcharts = 1;
    },
    fourtab2() {
      this.fourcharts = 2;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("myCharts"));
      // 绘制图表
      myChart.setOption({
        color: [
          "#91cc75",
          "#ffff53",
          "#eb7f27",
          "#e73322",
          "#8a1a4c",
          "#711426"
        ],
        legend: {
          top: "45%",
          itemWidth: 10,
          itemHeight: 10
        },
        tooltip: {
          trigger: "axis",
          showContent: false
        },
        dataset: {
          source: [
            ["product", "2017", "2018", "2019", "2020", "2021"],
            ["优", 4, 4, 14, 36, 15],
            ["良", 64, 75, 64, 61, 67],
            ["轻度", 29, 21, 18, 4, 15],
            ["中度", 4, 0, 4, 0, 4],
            ["重度", 0, 0, 0, 0, 0],
            ["严重", 0, 0, 0, 0, 0]
          ]
        },
        xAxis: {
          type: "value",
          max: 100
        },
        yAxis: {
          gridIndex: 0,
          type: "category"
        },
        grid: {
          // x: '10%',
          // y: '20%',
          height: "35%",
          left: "15%",
          right: "5%",
          top: "3%",
          show: true
        },
        series: [
          {
            type: "bar",
            stack: "total",
            smooth: true,
            label: {
              show: true,
              textStyle: {
                fontSize: "10px"
              }
            },
            seriesLayoutBy: "row",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            stack: "total",
            label: {
              show: true,
              textStyle: {
                fontSize: "10px"
              }
            },
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            stack: "total",
            label: {
              show: true,
              textStyle: {
                fontSize: "10px"
              }
            },
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            stack: "total",
            smooth: true,
            // label: {
            //   show: true,
            //   textStyle: {
            //     fontSize: "10px"
            //   }
            // },
            seriesLayoutBy: "row",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            stack: "total",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            stack: "total",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "pie",
            id: "pie",
            radius: "15%",
            hoverAnimation: false, // 鼠标移入变大
            center: ["75%", "63%"],
            emphasis: {
              focus: "data"
            },
            label: {
              // formatter: '',
              normal: {
                position: "inner",
                show: false
              }
            },
            encode: {
              itemName: "product",
              value: "2017",
              tooltip: "2017"
            }
          },
          {
            type: "pie",
            radius: "15%",
            center: ["25%", "63%"],
            hoverAnimation: false, // 鼠标移入变大
            label: {
              // formatter: '{b}: {@2012} ({d}%)',
              normal: {
                position: "inner",
                show: false
              }
            },
            encode: {
              itemName: "product",
              value: "2018",
              tooltip: "2018"
            }
          },
          {
            type: "pie",
            radius: "15%",
            center: ["50%", "63%"],
            hoverAnimation: false, // 鼠标移入变大
            label: {
              // formatter: '{b}: {@2012} ({d}%)',
              normal: {
                position: "inner",
                show: false
              }
            }
          },
          {
            type: "pie",
            radius: "15%",
            center: ["25%", "83%"],
            hoverAnimation: false, // 鼠标移入变大
            label: {
              // formatter: '{b}: {@2012} ({d}%)',
              normal: {
                position: "inner",
                show: false
              }
            }
          },
          {
            type: "pie",
            radius: "15%",
            center: ["50%", "83%"],
            hoverAnimation: false, // 鼠标移入变大
            label: {
              // formatter: '{b}: {@2012} ({d}%)',
              normal: {
                position: "inner",
                show: false
              }
            }
          }
        ]
      });
    },
    drawCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("buCharts"));
      myChart.setOption({
        grid: {
          top: "20%",
          left: "15%",
          bottom: "20%"
        },
        color: ["#53a9ff", "#59d575", "#ff9997", "#fdce88", "#a785fc"],
        legend: {
          // top: '1%',
          itemWidth: 10,
          itemHeight: 10
        },
        tooltip: {},
        dataset: {
          source: [
            ["product", "2017", "2018", "2019", "2020", "2021"],
            ["1月", 1.8, 2.2, 3.3, 2, 2.5],
            ["2月", 1.8, 2.2, 3.3, 2, 2.5],
            ["3月", 1.8, 2.2, 3.3, 2, 2.5],
            ["4月", 1.8, 2.2, 3.3, 2, 2.5],
            ["5月", 1.8, 2.2, 3.3, 2, 2.5]
          ]
        },
        xAxis: {
          type: "category"
        },
        yAxis: {},
        series: [
          {
            type: "bar"
          },
          {
            type: "bar"
          },
          {
            type: "bar"
          },
          {
            type: "bar"
          },
          {
            type: "bar"
          }
        ]
      });
    },
    drawLine4() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("myCharts4"));
      // 绘制图表
      myChart.setOption({
        color: ["#9f95ef", "#28c45e", "#f76668"],
        tooltip: {
          trigger: "item"
        },
        title: {
          text: "重点排放源",
          left: "center",
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          orient: "vertical",
          x: "left", // 可设定图例在左、右、居中
          y: "", // 可设定图例在上、下、居中
          padding: [50, 0, 0, 75],
          itemWidth: 8, // 设置宽度
          itemHeight: 8, // 设置高度
          itemGap: 10 // 来调图例之间的间距
        },
        series: [
          {
            name: "大兴街",
            type: "pie",
            radius: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            center: ["30%", "65%"],
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 600, name: "大兴街" },
              { value: 150, name: "五爱街" },
              { value: 200, name: "青年大街" }
            ]
          }
        ]
      });
    },
    drawright4() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("drawright4"));
      // 绘制图表
      myChart.setOption({
        color: ["#1fcee3", "#fd6764", "#30bf55"],
        tooltip: {
          trigger: "item"
        },
        title: {
          text: "超标污染源",
          left: "center",
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          orient: "vertical",
          x: "left", // 可设定图例在左、右、居中
          y: "", // 可设定图例在上、下、居中
          padding: [50, 0, 0, 70],
          itemWidth: 7, // 设置宽度
          itemHeight: 7, // 设置高度
          itemGap: 10 // 来调图例之间的间距
        },
        series: [
          {
            name: "新华街",
            type: "pie",
            radius: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            center: ["25%", "65%"],
            emphasis: {
              label: {
                show: true,
                fontSize: "12"
                // fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 600, name: "新华街" },
              { value: 150, name: "昆明湖街" },
              { value: 200, name: "望斌街" }
            ]
          }
        ]
      });
    },
    buRight4() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("buCharts4"));
      // 绘制图表
      myChart.setOption({
        color: "#22cfe0",
        grid: {
          // top: '15%',
          // left: "15%"
          // right: '0%',
          // bottom: '15%',
        },
        title: {
          text: "排污许可证发放",
          textStyle: {
            fontSize: 12
          }
        },
        label: {
          show: true, // 开启显示
          position: "top", // 在上方显示
          textStyle: {
            // 数值样式
            color: "black",
            fontSize: 12
            // fontWeight: 600
          }
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            formatter: function(value) {
              return value.split("").join("\n");
            }
          },
          type: "category",
          data: ["和平区", "皇姑区", "铁西区", "浑南区", "于洪区", "大东区"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [38, 20, 28, 13, 33, 18],
            type: "bar",
            barWidth: 10 // 柱图宽度
          }
        ]
      });
    },
    drawLine5() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("myCharts5"));
      // 绘制图表
      myChart.setOption({
        color: ["#1afcb3", "#fe4d88"],
        tooltip: {
          trigger: "item"
        },
        title: {
          text: "超标污染源",
          left: "center",
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          x: "left", // 可设定图例在左、右、居中
          y: "bottom", // 可设定图例在上、下、居中
          //  ③padding:[0,30,0,0] [（距离上方距离），（距离右方距离）、（距离下方距离）、（距离左方距离）]
          padding: [0, 0, 0, 0],
          itemWidth: 8, // 设置宽度
          itemHeight: 8, // 设置高度
          itemGap: 10 // 来调图例之间的间距
        },
        series: [
          {
            name: "机动车",
            type: "pie",
            radius: ["50%", "40%"],
            avoidLabelOverlap: false,
            center: ["50%", "50%"],
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12"
                // fontWeight: 'bold'
              }
            },
            data: [
              { value: 35, name: "机动车 35" },
              { value: 30, name: "非机械移动排放源 30" }
            ]
          }
        ]
      });
    },
    drawright5() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("drawright5"));
      // 绘制图表
      myChart.setOption({
        color: ["#7ae7ed", "#f69b23"],
        tooltip: {
          trigger: "item"
        },
        title: {
          text: "超标污染源",
          left: "center",
          textStyle: {
            fontSize: 12
          }
        },
        legend: {
          orient: "vertical",
          icon: "circle",
          x: "left", // 可设定图例在左、右、居中
          y: "bottom", // 可设定图例在上、下、居中
          //  ③padding:[0,30,0,0] [（距离上方距离），（距离右方距离）、（距离下方距离）、（距离左方距离）]
          padding: [0, 0, 0, 0],
          itemWidth: 8, // 设置宽度
          itemHeight: 8, // 设置高度
          itemGap: 10 // 来调图例之间的间距
        },
        series: [
          {
            name: "移动源排放量",
            type: "pie",
            radius: ["50%", "40%"],
            avoidLabelOverlap: false,
            center: ["50%", "50%"],
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12"
                // fontWeight: 'bold'
              }
            },
            data: [
              { value: 576, name: "移动源排放量 576" },
              { value: 2000, name: "非机械排放源排放源 2000" }
            ]
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
/* .home {
    position: absolute;
    right: 200px;
    top: .625rem;
    z-index: 9999;
} */
#myCharts {
  width: 100%;
  height: 5rem;
}
#myCharts4 {
  width: 1.75rem;
  height: 1.56rem;
}
#drawright4 {
  width: 1.75rem;
  height: 1.56rem;
}
#buCharts {
  width: 100%;
  height: 3.325rem;
}
#buCharts4 {
  width: 4.75rem;
  height: 3.325rem;
}

.status {
  width: 4.89rem;
  /* height: 2.5rem; */
  position: absolute;
  right: 0.15rem;
  top: 1.2rem;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0px 2px 4px 2px rgba(142, 155, 176, 0.5);
  border-radius: 6px;
  overflow: hidden;
}

.status-top {
  height: 0.525rem;
  width: 100%;
  background: linear-gradient(270deg, #5DAEEC 0%, #1684E1 100%);
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: space-between;
}

.status-top span {
  font-size: 0.175rem;
  /* color: #fff; */
  margin-left: 0.125rem;
}

.status-top span:last-child {
  /* color: #333; */
  margin-right: 10px;
}

.firstchartsdiv {
  margin-top: 0.125rem;
}

.firstchartsdiv span {
  font-size: 0.175rem;
  color: #228be3;
  margin: 0 0.01rem;
}

.firstchartsdiv img, .threechartsdiv img {
  width: 83px;
}

.firstchartsdiv, .threechartsdiv {
  margin-bottom: 10px;
}
.threechartsdiv span {
  font-size: 0.175rem;
  color: #228be3;
  margin: 0 0.01rem;
}
/* 第二个图 */
.flexbox {
  display: flex;
  margin-top: 0.125rem;
}
.transverse {
  display: flex;
  border: 1px solid #f4f6f3;
  margin: 0.0625rem;
  background-color: #19d0cd;
  border-radius: 5px;
  align-items: center;
  height: 0.9rem;
}
.transversediv {
  background-color: #fff;
  height: 100%;
  padding: 0.1125rem;
  /* padding-right: 0; */
}
.transversediv p:first-child {
  margin-bottom: 0.1rem;
}
.twobox {
  margin: 20px 0;
}
.prext {
  font-size: 0.15rem;
  padding: 0.125rem 0.1rem;
  color: #fff;
}
.pmData {
  margin-top: 0;
}
.colorbox {
  margin: 0 10px !important;
  background-color: #19d0cd !important;
  color: #fff;
  padding: 5px 0;
  border-radius: 5px;
}
.colorbox p {
  text-align: center;
}
.colorbox p:first-child {
  margin-bottom: 15px;
}
/* 第三个图 */
.home {
  width: 5.5rem;
  /* height: 2.5rem; */
  position: absolute;
  right: 0.625rem;
  top: 1.25rem;
  z-index: 999;
  /* background-color: #fff; */
}
.el-table {
  margin: 0;
}
.num_count {
  width: 100%;
  height: 40px;
  margin: auto;
  background: #f3f8fe;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
}
.count-left,
.count-right {
  width: 49%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.line {
  width: 1px;
  height: 30px;
  background: #42b983;
}
.box-card {
  background: #fff;
  border-radius: 10px 10px 0 0;
}
.over {
  color: green;
}
.noover {
  color: red;
}
/* 第四个图 */
.status4 {
  width: 3.75rem;
  height: 7.5rem;
  position: absolute;
  right: 0.9rem;
  top: 1.25rem;
  z-index: 999;
  background-color: #fff;
}
.staus-buttom5 {
  display: flex;
  padding-bottom: 0.25rem;
}
.ydy {
  width: 100%;
  height: 0.375rem;
  display: block;
  font-size: 0.175rem;
  line-height: 0.375rem;
  padding-left: 0.0625rem;
  color: #fff;
  border-radius: 5px 5px 0 0;
  background-color: #2d91e4;
}
.status-top4 {
  width: 100%;
  background: linear-gradient(270deg, #5DAEEC 0%, #1684E1 100%);
  height: 0.375rem;
  line-height: 0.375rem;
  border-radius: 6px;
  padding-left: 0.0625rem;
}
.status-top4 span {
  font-size: 0.15rem;
  color: #fff;
}
.status-buttom4 {
  width: 100%;
  display: flex;
}
.buttom4 {
  height: 3.75rem;
}
/deep/.el-table td,
.el-table th {
  padding: 0 !important;
}
/deep/.el-table th {
  padding: 0 !important;
}
</style>
<style>
.status .el-input__inner{
  font-size: 0.15rem;
  padding-left: 0.1rem !important;
  color: #666666;
}
.status .el-select__caret{
  font-size: 12px;
}
.status .el-input__icon{
  width: 14px;
  color: #1890FF !important;
}
</style>
